<!DOCTYPE html>
<html class="ui-mobile"><head><!-- base href="http://fiddle.jshell.net/Gajotres/8uac7/show/light/" -->
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>
            Movie List
        </title>
  
  <script type="text/javascript" src="a_data/jquery-1.js"></script>
  <link rel="stylesheet" type="text/css" href="a_data/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="a_data/result-light.css">
  
    
      <script type="text/javascript" src="a_data/jquery.js"></script>
    
  
    
      <link rel="stylesheet" type="text/css" href="a_data/jquery_003.css">
    
  
    
      <link rel="stylesheet" type="text/css" href="a_data/jquery.css">
    
  
    
      <link rel="stylesheet" type="text/css" href="a_data/jquery_002.css">
    
  
    
      <script type="text/javascript" src="a_data/iscroll.js"></script>
    
  
    
      <script type="text/javascript" src="a_data/jquery_002.js"></script>
    
  
  <style type="text/css">
    .ui-content {
    padding: 0 !important;
}
 
.ui-listview {
    margin: 0 !important;
}
 
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 

$(document).on('pageinit', '#home', function(){      
    var url = 'http://api.themoviedb.org/3/',
        mode = 'search/movie?query=',
        movieName = '&query='+encodeURI('Batman'),        
        key = '&api_key=470fd2ec8853e25d2f8d86f685d2270e';        
    
    $.ajax({
        url: url + mode + key + movieName ,
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});

$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            $('#movie-data').append('<li><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"></li>');
            $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
            $('#movie-data').append('<li>Release date'+row.release_date+'</li>');
            $('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');   
            $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');             
            $('#movie-data').listview('refresh');            
        }
    });    
});

$(document).on('vclick', '#movie-list li a', function(){  
    movieInfo.id = $(this).attr('data-id');
    $.mobile.changePage( "#headline", { transition: "slide", changeHash: false });
});

var movieInfo = {
    id : null,
    result : null
}

var ajax = {  
    parseJSONP:function(result){  
        movieInfo.result = result.results;
        $.each(result.results, function(i, row) {
            console.log(JSON.stringify(row));
            $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
        });
        $('#movie-list').listview('refresh');
    }
}

//]]>  

</script>


</head>
<body class="ui-mobile-viewport ui-overlay-a">
  <div style="min-height: 500px;" class="ui-page ui-page-theme-a iscroll-page ui-page-active" tabindex="0" data-url="home" data-role="page" id="home">
    <div class="ui-header ui-bar-a iscroll-fixed" role="banner" data-theme="a" data-role="header">
        <h3 aria-level="1" role="heading" class="ui-title">
            Movie List
        </h3>
    </div>        
    <div role="main" class="ui-content" data-role="content">
        <div style="padding: 0px; height: 410px; overflow: hidden;" class="example-wrapper iscroll-wrapper" data-iscroll="">
            <div style="min-height: 410px; transform-origin: 0px 0px 0px; position: absolute; top: 0px; left: 0px;" class="iscroll-scroller"><div class="iscroll-top-spacer"></div><div style="padding: 0px;" class="iscroll-content"><ul class="ui-listview ui-group-theme-a" data-role="listview" id="movie-list" data-theme="a">
                
            <li class="ui-li-has-thumb ui-first-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="268"><img src="a_data/eDUy9octF4WpC9IIfxek0ZZPMhT.jpg"><h3>Batman</h3><p>6.3/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="125249"><img src="a_data/7wnRn8iQ0QInEK1CaZFqw1zPhht.jpg"><h3>Batman</h3><p>7/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="2661"><img src="a_data/xkptUwXpjvEXEpiPbmneEeNWT3x.jpg"><h3>Batman: The Movie</h3><p>6.1/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="415"><img src="a_data/79AYCcxw3kSKbhGpx1LiqaCAbwo.jpg"><h3>Batman &amp; Robin</h3><p>4.8/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="209112"><img src="a_data/jS7ijdxm9llGc7uEbk8MQcxacgC.jpg"><h3>Batman vs. Superman</h3><p>10/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="192395"><img src="a_data/gRZ6KimZxk4IUo8Audcvcw9HUpI.jpg"><h3>Scooby-Doo Meets Batman</h3><p>2.6/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="15805"><img src="a_data/tG4ZFIOj4lA7GNZYvsjnMNfQGlh.jpg"><h3>Batman &amp; Mr. Freeze: SubZero</h3><p>6.8/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="126040"><img src="a_data/v0obWzRANCxfAcQzfrKvcmEWdu2.jpg"><h3>Batman - Feira da Fruta</h3><p>0/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="177271"><img src="a_data/iq3baMjl4phgT7ImHZzwOBvaeKc.jpg"><h3>LEGO Batman: The Movie - DC Superheroes Unite</h3><p>6.6/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="17074"><img src="a_data/nyQFes4F4VBHulnlNQbhlDm4Wbj.jpg"><h3>The Batman Superman Movie: World's Finest</h3><p>7.6/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="272"><img src="a_data/xiosOeLfzPbfLfqui41kSWnO0sZ.jpg"><h3>Batman Begins</h3><p>7/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="414"><img src="a_data/ibxusHQIinpiq6gjvHpQ37hGrbE.jpg"><h3>Batman Forever</h3><p>5.3/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="49026"><img src="a_data/dEYnvnUfXrqvqeRSqvIEtmzhoA8.jpg"><h3>The Dark Knight Rises</h3><p>7.2/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="364"><img src="a_data/4nUWvmEKRy7BsKsAzhTadAmhFOR.jpg"><h3>Batman Returns</h3><p>6.2/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="204649"><img src="a_data/zMY2QVCN9z6YH0eS32NOrSss0gb.jpg"><h3>Batman: Beyond Batman</h3><p>10/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="186579"><img src="a_data/1k0ep5h934ddQKvfVQe4gY9NhGj.jpg"><h3>Batman Tech</h3><p>0/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="138757"><img src="a_data/sWa1Y5QhGuJMjw8uuFoggGLqZ0y.jpg"><h3>James Batman</h3><p>0/10</p></a></li><li class="ui-li-has-thumb"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="155"><img src="a_data/1hRoyzDtpgMU7Dz4JF22RANzQO7.jpg"><h3>The Dark Knight</h3><p>7.7/10</p></a></li><li class="ui-li-has-thumb ui-last-child"><a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="" data-id="69735"><img src="a_data/bI1YVuhBN6Vws1GP9Mf01DyhC2s.jpg"><h3>Batman: Year One</h3><p>7.2/10</p></a></li></ul></div><div class="iscroll-bottom-spacer"></div></div>
        <div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; transition-property: opacity; overflow: hidden; opacity: 1;"><div style="position: absolute; z-index: 100; background: none repeat scroll 0% 0% padding-box rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); width: 100%; border-radius: 3px 3px 3px 3px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transform: translate(0px, 0px) translateZ(0px); height: 106px;"></div></div></div>
    </div>
    <div class="ui-footer ui-bar-a iscroll-fixed" role="contentinfo" data-theme="a" data-role="footer">
        <h1 aria-level="1" role="heading" class="ui-title">Copyright 2013</h1>
    </div>              
</div>
<div data-url="headline" data-role="page" id="headline">
    <div data-theme="a" data-role="header">
        <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>                        
        <h3>
            Movie Info
        </h3>
    </div>        
    <div data-role="content">
        <ul data-role="listview" id="movie-data" data-theme="a">
            
        </ul>
    </div>
</div>    

  





<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div></body></html>